<template>
  <ul @click="c()">
    <TodoListItemVue
      v-for="todoObj in todo"
      :todo="todoObj"
      :key="todoObj.id"
      @click.native="c()"
    />
    <div v-show="showMessAge" class="mes">
      <p>{{ msg }}</p>
    </div>
  </ul>
</template>

<script>
import TodoListItemVue from "./TodoListItem.vue";
export default {
  name: "TodoListCenter",
  data() {
    return {
      msg: "还没有任何的todos哦,快来添加一个吧~",
    };
  },
  methods: {
    c() {
      this.$bus.$emit("hideWindow");
    },
  },
  components: {
    TodoListItemVue,
  },
  computed: {
    showMessAge() {
      return !this.todoArr.length;
    },
  },
  props: ["todo", "todoArr"],
};
</script>

<style>
ul {
  list-style: none;
  width: 100%;
  height: 84%;
  overflow: auto;
}
ul .mes {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}
ul .mes p {
  color: #999;
}
ul::-webkit-scrollbar {
  cursor: pointer;
  width: 7px;
  background-color: white;
  text-align: center;
  transition: 0.3s;
}
ul::-webkit-scrollbar-thumb {
  width: 7px;
  background-color: #eee;
  border-radius: 3px;
}
ul::-webkit-scrollbar-thumb:hover {
  background-color: #888;
  border-radius: 3px;
}
</style>